<template>
  <div class="wrapper">
    <s-layout class="layout-wrapper">
      <s-header class="header-wrapper"> header </s-header>
      <s-layout class="layout-wrapper">
        <s-sider class="sider-wrapper"> sider </s-sider>
        <s-content class="content-wrapper"> content </s-content>
      </s-layout>
      <s-footer class="footer-wrapper"> footer </s-footer>
    </s-layout>
    <br>
    <s-layout class="layout-wrapper">
      <s-header class="header-wrapper"> header </s-header>
      <s-content class="content-wrapper"> content </s-content>
      <s-footer class="footer-wrapper"> footer </s-footer>
    </s-layout>
    <br>
    <s-layout class="layout-wrapper">
      <s-header class="header-wrapper"> header </s-header>
      <s-layout class="layout-wrapper">
        <s-sider class="sider-wrapper"> sider </s-sider>
        <s-layout class="layout-wrapper">
          <s-content class="content-wrapper"> content </s-content>
          <s-footer class="footer-wrapper"> footer </s-footer>
        </s-layout>
      </s-layout>
    </s-layout>
  </div>
</template>
<script>
import Layout from "../../../src/components/Layout2.vue";
import Header from "../../../src/components/Header.vue";
import Sider from "../../../src/components/Sider.vue";
import Content from "../../../src/components/Content.vue";
import Footer from "../../../src/components/Footer.vue";
export default {
  components: {
    "s-layout": Layout,
    "s-header":Header,
    "s-sider":Sider,
    "s-content":Content,    
    "s-footer":Footer,   
  },

};
</script>
<style lang="scss" scoped>
$background: #3eaf7c;
.wrapper {
> .layout-wrapper { height: 30vh;
  > .header-wrapper { height: 3em; background: $background; }
  > .content-wrapper { background: lighten($background, 40%); }
  > .layout-wrapper { height: 6em;
    > .sider-wrapper { width: 3em; background: lighten($background, 15%); }
    > .content-wrapper { background: lighten($background, 40%); }
    > .layout-wrapper{
      > .content-wrapper{ background: lighten($background, 40%); }
      > .footer-wrapper { background: $background; }
    }
  }
  > .footer-wrapper { background: $background; }
}
}
</style>